<template>
  <div>
      <section class="menu-block">
        <h2>获取版本信息</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>
import {app} from 'fzHybrid'
...
var data = app.version() //返回数据: { version:"1.0",build:"10000"}
                </code>
            </pre>
            <van-button size="large" type="primary" @click="getAppVersionClick">点击获取app版本信息</van-button>
            <code>app版本信息：{{ appVersionInfo }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取app名称</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>
import {app} from 'fzHybrid'
...
var data = app.name()
                </code>
            </pre>
            <van-button size="large" type="primary" @click="getAppNameClick">点击获取app名称</van-button>
            <code>app名称：{{ appName }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>弹出警告框</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>
import {app} from 'fzHybrid'
...
app.alert({
    title: "title", //标题
    msg: "msg",     //信息
    callback:function() {   //用户点击按钮后回调函数
    //do something...
})
                </code>
            </pre>
            <van-cell-group>
                    <van-field v-model="alertTitle" label="title" placeholder="请输入title" />
                    <van-field v-model="alertMsg" label="msg" placeholder="请输入msg" />
            </van-cell-group>
            <van-button size="large" type="primary" @click="alertClick">点击弹出警告框</van-button>
            <code>警告框已弹出：{{ alertCount }}次</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>弹出确认框</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>
import {app} from 'fzHybrid'
...
app.alert({
    title:'',       //标题
    msg:'',         //信息
    yesTitle:'',    //确认(同意)按钮显示文字，默认显示确认
    noTitle:'',     //取消(不同意)按钮显示文字,默认显示取消
    callback:function(result){}     //用户点击按钮后回调函数，result为true表示点击确认按钮，反之表示点击取消按钮
})
                </code>
            </pre>
            <van-cell-group>
                    <van-field v-model="confirmTitle" label="title" placeholder="请输入title" />
                    <van-field v-model="confirmMsg" label="msg" placeholder="请输入msg" />
                    <van-field v-model="confirmYesTitle" label="yesTitle" placeholder="请输入yesTitle" />
                    <van-field v-model="confirmNoTitle" label="noTitle" placeholder="请输入noTitle" />
                </van-cell-group>
            <van-button size="large" type="primary" @click="confirmClick">点击弹出确认框</van-button>
            <code>确认框点击结果：{{ confirmResult }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>增加app badge num</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>
import {app} from 'fzHybrid'
...
app.addBadge(1) //输入的数量为负数时，num减少，当计算后的结果小于0时，badge消失,实际badge num一直保持0
                </code>
            </pre>
            <van-cell-group>
                    <van-field v-model="addBadgeNum" label="num" placeholder="请输入num" />
                </van-cell-group>
            <van-button size="large" type="primary" @click="addBadgeNumClick">点击增加badge num</van-button>
        </div>
      </section>
      <section class="menu-block">
        <h2>设置app badge num</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>
import {app} from 'fzHybrid'
...
app.setBadge(1) //输入的数量为正数时，显示badge，输入0，badge消失；输入负数无效,之前的badge num 不变
                </code>
            </pre>
            <van-cell-group>
                    <van-field v-model="setBadgeNum" label="num" placeholder="请输入num" />
                </van-cell-group>
            <van-button size="large" type="primary" @click="setBadgeNumClick">点击设置app badge num</van-button>
        </div>
      </section>
  </div>
</template>

<script>
import {Button, CellGroup, Cell, Field, Notify} from 'vant'
import {app} from 'MTHybrid'

export default {
    data () {
        return {
            appVersionInfo: '',
            appName: '',
            alertTitle: '',
            alertMsg: '',
            alertCount: 0,
            confirmTitle: '',
            confirmMsg: '',
            confirmYesTitle: '确认',
            confirmNoTitle: '取消',
            confirmResult: '',
            addBadgeNum: '',
            setBadgeNum: ''
        }
    },
    methods: {
        getAppVersionClick () {
            var data = app.version()
            this.appVersionInfo = JSON.stringify(data)
        },
        getAppNameClick () {
            var name = app.name()
            this.appName = name
        },
        alertClick () {
            const thiz = this
            app.alert({
                title: this.alertTitle,
                msg: this.alertMsg,
                callback: function () {
                    thiz.alertCount = thiz.alertCount + 1
                }
            })
        },
        confirmClick () {
            const thiz = this
            app.confirm({
                title: this.confirmTitle,
                msg: this.confirmMsg,
                yesTitle: this.confirmYesTitle,
                noTitle: this.confirmNoTitle,
                callback: function (result) {
                    thiz.confirmResult = result
                }
            })
        },
        addBadgeNumClick () {
            if (this.addBadgeNum === '') {
                return
            }
            app.addBadge(parseInt(this.addBadgeNum))
            Notify({
                message: '增加(减少)app num, 回到主界面查看效果',
                duration: 1000,
                background: '#1989fa'
            })
        },
        setBadgeNumClick () {
            var num = this.setBadgeNum
            if (this.setBadgeNum === '') {
                num = '0'
            }
            app.setBadge(parseInt(num))
            Notify({
                message: '设置app num，回到主界面查看效果',
                duration: 1000,
                background: '#1989fa'
            })
        }
    },
    components: {
        [Button.name]: Button,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Notify.name]: Notify
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
